.network-log-details-tab-header {
  div {
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .codicon-warning {
    color: var(--vscode-problemsWarningIcon-foreground);
  }
}

.network-log-details-tab {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.tab-padding {
  padding: 8px;
}

.network-log-details-close-button {
  position: absolute;
  top: 3px;
  right: 5px;
  background: none;
  border: none;
  width: 22px;
  height: 22px;
  color: var(--vscode-icon-foreground);
  border-radius: 5px;
  padding: 3px;
  cursor: pointer;
  z-index: 1;
}

.network-log-details-close-button:hover {
  outline: 1px dashed var(--vscode-toolbar-hoverOutline);
  outline-offset: -1px;
  background-color: var(--vscode-toolbar-hoverBackground);
}

/* Mimick the styles used in vscode-elements */
.network-log-details-tab-scrollable {
  &:hover .os-scrollbar {
    transition-duration: 100ms;
  }

  .os-scrollbar {
    transition-duration: 800ms;

    --os-size: 10px;
    --os-padding-perpendicular: 0;
    --os-padding-axis: 0;
    --os-handle-border-radius: 0px;
    --os-handle-bg: var(--vscode-scrollbarSlider-background);
    --os-handle-bg-hover: var(--vscode-scrollbarSlider-hoverBackground);
    --os-handle-bg-active: var(--vscode-scrollbarSlider-hoverBackground);

    .os-scrollbar-handle {
      transition: none;
    }
  }
}
